<template>
  <div id="left-quarter-card"></div>
</template>

<script>
import echarts from "utils/echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.initEcharts();
  },
  props: {
    quarter: {
      type: null,
      default: () => []
    },
  },
  watch: {
    quarter(newVal, oldVal) {
      this.initEcharts();
    }
  },
  methods: {
    initEcharts() {
      if (!document.getElementById("left-quarter-card")) {
        return;
      }
      let dataY = this.quarter.map(item => {
        return item.order_total
      });
      let $echartsDOM = document.getElementById("left-quarter-card");
      let myEcharts = echarts.init($echartsDOM);
      let option = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,
          axisPointer: {
            label: {
              backgroundColor: "#6a7985"
            }
          },
          formatter: function (params) {
            return `${params[0].name}: ${params[0].value}`;
          }
        },
        grid: {
          x: 0,
          y: 40,
          x2: 10,
          y2: 0,
          // document.documentElement.clientHeight > 720 ? 50 : document.documentElement.clientHeight > 640 ? 40 : 20,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["第一季度", "第二季度", "第三季度", "第四季度"],
          boundaryGap: false, // 不留白，从原点开始
          axisLine: {
            lineStyle: {
              color: "#517FB5"
            },
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0,
            margin: 20,
            textStyle: {
              color: "#FFFFFF",
            },
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#517FB5"
            }
          },
          axisLabel: {
            margin: 15,
            textStyle: {
              color: "#FFFFFF",
            }
          },
          splitLine: {
            show: false //去掉折线图中的横线
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          }
        },
        series: [
          {
            data: dataY,
            type: "line",
            lineStyle: {
              color: "#07a0d5"
            },
            markLine: {
              symbol: ['none', 'none'],
              label: { show: false },
              data: [{ xAxis: 1 }, { xAxis: 2 }, { xAxis: 3 }],
              lineStyle: {
                normal: {
                  color: 'rgba(81,127,181,0.5)'
                } 
              }
            },
            smooth: true,
            symbolSize: 5,
            symbol: 'circle',     //设定为实心点 
            itemStyle: {
              normal: {
                color:'#08cbfd', //折线点的颜色
                borderColor: '#0776ad', //拐点边框颜色
                // borderWidth: 2, //拐点边框大小
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(2,217,253,1)',
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(2,217,253,0.3)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(2,217,253,0.1)',
                  },
                ]),
              },
            },
          }
        ]
      };
      myEcharts.setOption(option, true);
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@media screen and (max-height: 720px) {
  #left-quarter-card {
    height: 92% !important;
  }
}

#left-quarter-card {
  height: 90%;
}
</style>
